<template>
    <div>
        <header-test name="我的"/>
        <div class="person">
            <div>
                <div class="user_info">
                    <div class="user_pic">
                        <img src="https://s.yezgea02.com/1604040746310/aaaddd.png" alt=""/>
                    </div>
                    <div class="user_desc">
                        <div>昵称：{{ userInfo.nickName }}</div>
                        <div>登录名：{{ userInfo.loginName }}</div>
                        <div>个性签名：{{ userInfo.introduceSign }}</div>
                    </div>
                </div>
                <div class="person_nav">
                    <div
                        v-for="nav in navList"
                        :key="nav.path"
                        class="nav_item"
                        @click="goToNav(nav.path)"
                    >
                        <span>{{ nav.title }}</span>
                        <span><van-icon name="arrow" /></span>
                    </div>
                </div>
            </div>
            <nav-bar />
        </div>

    </div>

</template>

<script>
import { useRouter } from 'vue-router';
import NavBar from '@/components/NavBar.vue';
import HeaderTest from "@/components/HeaderTest.vue";
import { getUserInfo } from "@/service/user";
import { reactive,toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
export default {
    components: { NavBar, HeaderTest },
    setup() {
        const router = useRouter();
        const navList = [
            {
                title: "我的订单",
                path: "/my-order",
            },
            {
                title:"账号管理",
                path:"/accountMg",
            },
            {
                title:"地址管理",
                path:"address",
            },
            {
                title:"关于我们",
                path:"about",
            },
        ];
        const state = reactive({
            userInfo:{}
        });
        const goToNav = (path) => {
            router.push(path);
        };
        const getUserInfoData = async () => {
            console.log('=================9999');
            const { data } = await getUserInfo();

            console.log(data);
            state.userInfo = data;
        };
        onMounted(() => {
            getUserInfoData();
        });
        return {
            ...toRefs(state),
            navList,
            goToNav,
        };
    },
};

</script>

<style lang="less" scoped>
.person {
    padding: 1rem;
    .user_info {
        background: linear-gradient(90deg,#1baeae,#51c7c7);
        border-radius: 0.5rem;
        padding: 1.25rem;
        display: flex;
        .user_pic {
            > img {
                width: 3.75rem;
            }
        }
        .user_desc {
            height: 1.25rem;
            line-height: 1.25rem;
            flex: 1;
            text-align: left;
            color: white;
            margin-left: 0.5rem;
            font-size: 0.9rem;
        }
    }

    .person_nav {
        margin: 1rem 0;
        .nav_item {
            height: 2.5rem;
            display: flex;
            justify-content: space-between;
            margin: 0 0.5rem;
        }
    }
}
</style>